<template>
  <div
    class="dialog"
    v-if="show"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="body_wapper">
      <div class="body">
        <i
          class="el-icon-close"
          @click="
            show = false;
            $emit('close');
          "
        ></i>
        <div :style="personnel"></div>
        <!-- <dv-border-box-1> -->
        <rz-height :height="20" />
        <div class="content">
          <div class="list">
   
            <div class="item" v-for="(item, index) in data" :key="index">
              <div class="title">
               
                {{
                  [
                   {
                      name: "批发市场",
                      MarketRef: 1,
                    },
                    {
                      name: "农贸市场",
                      MarketRef: 2,
                    },
                   
                    {
                      name: "食材配送企业",
                      MarketRef: 8,
                    },
                    {
                      name: "快检中心",
                      MarketRef: 3,
                    },
                 
                  ].filter((x) => x.MarketRef == item.MarketRef)[0].name
                }}
                   <!-- {
                      name: "农产品基地",
                      MarketRef: 11,
                    }, -->
              </div>
              <rz-height :height="15" />
              <div class="item1">
                <div class="item2">
                  <div>快检单位数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.dwCount }}</span> 家
                  </div>
                </div>
                <div class="item2">
                  <div>快检总批次数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.pcCount }}</span> 次
                  </div>
                </div>
              </div>
              <rz-height :height="15" />
              <div class="item1">
                <div class="item2">
                  <div>疑似阳性数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.yxCount }}</span> 次
                  </div>
                </div>
                <div class="item2">
                  <div>合格率</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.ratio }}</span> %
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div :style="note1">各单位类型分析</div>
        </div>
        <rz-height :height="20" />

        <el-row :gutter="20">
          <el-col :span="16">
            <div class="content">
              <div id="main16" style="width: 100%; height: 300px"></div>
              <div :style="note1">各月份快检分析</div>
            </div></el-col
          >
          <el-col :span="8">
            <div class="content">
              <div id="main19" style="width: 100%; height: 300px"></div>
              <div :style="note1">处理结果分析</div>
            </div></el-col
          >
        </el-row>
        <rz-height :height="20" />
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="content">


  <div class="table">
            <div style="flex: 1" class="center">序号</div>
            <div style="flex: 2" class="center">检测项目</div>
            <div style="flex: 1" class="center">检测总数</div>
            <div style="flex: 1" class="center">疑似阳性数</div>
            <div style="flex: 3" class="center">合格率</div>
          </div>


   <div :class="['tableBody',index%2==0?'active':'']" v-for="(item, index) in data3" :key="index" >
            <div style="flex: 1" class="center">
                  <span v-if="index==0" class="num" style="background:#F87627">{{index+1}}</span>
                  <span v-else-if="index==1" style="background:#EC42C0" class="num">{{index+1}}</span>
                  <span v-else-if="index==2" style="background:#0178DD" class="num">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
            </div>
            <div style="flex: 2" class="center" >{{item.Name}}</div>
            <div style="flex: 1;color:#E99A1B" class="center" >{{item.pcCount}}</div>
            <div style="flex: 1 ;color:#D2E82B     " class="center">{{item.yxCount}}</div>
            <div style="flex: 3" class="center">
              <el-progress :stroke-width="18" :text-inside="true" :percentage="Number(item.ratio)" ></el-progress>
            </div>
   </div>




              <div :style="note1">检测项目TOP10</div>
            </div></el-col
          >
          <el-col :span="12">
            <div class="content">

<div class="table">
            <div style="flex: 1" class="center">序号</div>
            <div style="flex: 2" class="center">检测项目</div>
            <div style="flex: 1" class="center">检测总数</div>
            <div style="flex: 1" class="center">疑似阳性数</div>
            <div style="flex: 3" class="center">合格率</div>
          </div>


   <div :class="['tableBody',index%2==0?'active':'']" v-for="(item, index) in data4" :key="index" >
            <div style="flex: 1" class="center">
                  <span v-if="index==0" class="num" style="background:#F87627">{{index+1}}</span>
                  <span v-else-if="index==1" style="background:#EC42C0" class="num">{{index+1}}</span>
                  <span v-else-if="index==2" style="background:#0178DD" class="num">{{index+1}}</span>
                  <span v-else>{{index+1}}</span>
            </div>
            <div style="flex: 2" class="center" >{{item.Name}}</div>
            <div style="flex: 1;color:#E99A1B" class="center" >{{item.pcCount}}</div>
            <div style="flex: 1 ;color:#D2E82B     " class="center">{{item.yxCount}}</div>
            <div style="flex: 3" class="center">
              <el-progress :stroke-width="18" :text-inside="true" :percentage="Number(item.ratio)" ></el-progress>
            </div>
   </div>


              <div :style="note1">检测品种TOP10</div>
            </div>
          </el-col>
        </el-row>

        <!-- </dv-border-box-1> -->
      </div>
      <rz-height />
      <rz-height />
      <rz-height />
      <rz-height />
    </div>
  </div>
</template>
<script>
import { purchasebill } from "@/api/modules/home";
var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {},
  // 页面加载完成
  mounted() {
    Promise.all([
      this.getList(),
      this.getList1(),
      this.getList2(),
      this.getList3(),
      this.getList4(),
    ]).then((res) => {
      console.log(res);
      try {
        let list = [
          {
            name: "农贸市场",
            MarketRef: 2,
          },
          {
            name: "商超",
            MarketRef: 1,
          },
          {
            name: "食材配送企业",
            MarketRef: 8,
          },
          {
            name: "快检中心",
            MarketRef: 3,
          },
          // {
          //   name: "农产品基地",
          //   MarketRef: 11,
          // },
        ];
        let ListA = [];
        list.forEach((x) => {
          if (!res[0].data.some((z) => z.MarketRef == x.MarketRef)) {
            ListA.push({
              MarketRef: x.MarketRef,
              dwCount: 0,
              pcCount: 0,
              ratio: 0,
              yxCount: 0,
            });
          }
        });
        this.data = [...res[0].data,...ListA];
      } catch (error) {
        this.data = res[0].data;
      }

      this.data1 = res[1].data;
      this.data2 = res[2].data;
      this.data3 = res[3].data;
      this.data4 = res[4].data;
      this.pieChart();
      this.pieChart2()
      // this.pieChart3()
      this.loading = false;
    });
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      show: true,
      loading: true,
      note1: {
        backgroundImage: "url(" + require("@/assets/images/item13.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
        left: "20px",
        paddingLeft: "10px",
        width: "170px",
        top: "0",
        transform: "translateY(-50%)",
        color: "white",
        fontSize: "14px",
        height: "25px",
        lineHeight: "24px",
      },
      personnel: {
        width: "500px",
        margin: "0 auto",
        backgroundImage: "url(" + require("@/assets/images/item17.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        height: "50px",
      },
      data: [],
      data1: [],
      data2: [],
      data3: [],
      data4:[]
    };
  },
  // 方法
  methods: {
    async getList() {
      return await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Quick_Ref_Data",
      });
    },
    async getList1() {
      return await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Quick_Month_Data",
      });
    },
    async getList2() {
      return await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Quick_Result_Data",
      });
    },
    async getList3() {
      return await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Quick_qItem_Data",
      });
    },
     async getList4() {
      return await purchasebill({
        dataMapList: [
          {
            key: "access_token",
            value: "c3puY3A=",
          },
        ],
        methodName: "Get_Sec_Quick_Item_Data",
      });
    },
    pieChart() {
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["单位数", "批次数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: [
          {
            name: "单位数",
            type: "value",
            splitLine: {
              show: false, // Do not show grid lines
            },
          },
          {
            //第二种方式
            type: "value",
            name: "批次数",
            position: "right",
            splitLine: {
              show: false, // Do not show grid lines
            },
          },
        ],
        series: [
          {
            name: "单位数",
            type: "bar",
            data: this.data1.map((x) => x.dwCount),

            barWidth: 30,
             label: {
        show: true,
        position: 'top',
        color:"white"
      },
          },
          {
            name: "批次数",
            type: "line",
            stack: "总量",
            yAxisIndex: 1,
            data: this.data1.map((x) => x.pcCount),
          },
        ],
      };
      echarts.init(document.getElementById("main16"), "dark").setOption(option);
    },
    pieChart2() {
      let option = {
        legend: {
          top: 10,
          data: this.data2.map(x=>x.Result),
          textStyle: {
            color: "white",
          },
        },
        color: ["#4992FF", "#7cffb2", "#58d9f9", "#fddd60", "#ff6e76"],
        backgroundColor: "transparent",
        tooltip: {
          textStyle: {
            color: "#00E0FB",
          },
          trigger: "item",
          formatter: "{b} : {c}家，占比 ({d}%)",
          backgroundColor: "rgba(4,39,121,0.9)",
        },

        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "60%"],
            data:
              this.data2.map(x=>{
                  return {
                    value:x.IsDele,
                    Proportion:x.pcCount,
                    name:x.Result,
                  }
              }),
            hoverAnimation: false,
            label: {
              color: "#fff",
              show: true,
              formatter: function (e) {
                return `${e.data.value}家(${e.data.Proportion}批次)`;
              },
            },
          },
        ],
      };
      echarts.init(document.getElementById("main19"), "dark").setOption(option);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.dialog {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  overflow: auto;

  .body_wapper {
    height: 100%;
    width: 90%;
    left: 5%;
    top: 5%;
    position: absolute;
    .body {
      background: url(../../../../assets/images/background.jpg);
      padding: 20px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .el-icon-close {
        color: #2760b5;
        font-size: 30px;
        border-radius: 30px;
        cursor: pointer;
        border: 2px solid #2760b5;
        position: absolute;
        right: 10px;
        top: 10px;
      }

      // .dv-border-box-1 {
      //   height: auto;
      .content {
        position: relative;
        padding: 20px 20px;
        background: url(../../../../assets/images/item10.png),
          url(../../../../assets/images/item8.png),
          url(../../../../assets/images/item9.png),
          url(../../../../assets/images/item11.png);
        background-position: top left, top right, bottom right, bottom left;
        background-repeat: no-repeat;
        border: 1px solid #1556ab;
        .list {
          color: #fff;
          display: flex;
          justify-content: space-around;

          .item {
            flex: 1;
            padding: 0 10px;
            // min-width: 150px;
            // flex-basis: 100px;
            // height: 90px;
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            // div {
            //   text-align: center;
            //   font-weight: 700;
            // }
            // cursor: pointer;
            .item1 {
              display: flex;
            }
            .item2 {
              display: flex;
              flex: 1;
              flex-direction: column;
              text-align: center;
              .text {
                font-size: 16px;
                color: #71f2f4;
              }
            }
            .title {
              font-size: 16px;
              background: url(../../../../assets/images/item12.png);
              text-align: center;
              background-size: 100% 100%;
              padding: 3px 0;
            }
          }
        }



 .table {
          display: flex;
          align-items: center;
          height: 40px;
          color: #fff;
         color: #2DDDF1;
          font-size: 14px;
          font-weight: 700;
               padding-right: 10px;
        }
        .tableBody {
          display: flex;
          align-items: center;
          padding: 10px 0;
          font-size: 14px;
          color: #fff;
          padding-right: 10px;
          .num{
            display: inline-block;
            border-radius: 50%;
            height: 20px;
            width: 20px;
            line-height: 20px;
          }
         
        }

 .active{
            background-color: rgba(13, 71, 132,0.5);
          }


      }
      // }
    }
  }
}
</style>